<!-- right_box -->
<template>
	<transition
		appear
		name="custom-classes-transition"
		enter-active-class="animate__animated animate__faster  animate__fadeInRight "
		leave-active-class="animate__animated animate__faster animate__fadeOutRight "
	>
		<div class="right_box">
			<div class="content">
				<slot></slot>
			</div>
		</div>
	</transition>
</template>

<script lang="ts" setup>
	// import { useAnimateStore } from '@/stores/animate'
	import { computed } from 'vue'

	// const animatestore = useAnimateStore()
	// const animate = computed(() => animatestore.$state.Animate)
</script>

<style lang="scss" scoped>
	.right_box {
		position: absolute;
		width: 50%;
		height: 100%;
		top: 0;
		right: 0;
		padding-top: calc($headerHeight + 25px);
		z-index: 9;
		background-color: rgba(0, 0, 0, 1);
		padding-left: 30px;
		padding-right: 30px;
		box-sizing: border-box;

		.content {
			width: 100%;
			height: 100%;
			// border: 1px solid rgba(255, 255, 255, 0.527);
		}
	}
</style>
